import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import {HeroSearchService} from './hero-search.service'
import {Hero} from './hero'
@Component({
    selector: 'hero-search',
    template: require('./hero-search.html'),
    styles: [require('./hero-search.css')],
    providers: [HeroSearchService]
})
export class HeroSearchComponent implements OnInit {
    heros: Observable<Hero[]>;
    private searchTerm = new Subject<string>()
    constructor(private heroSearchService: HeroSearchService,
        private router: Router) { }

    // Push a search term into the observable stream.
    search(term: string) {
        this.searchTerm.next(term);
    }

    ngOnInit() {
        console.log('---init---')
        this.heros = this.searchTerm
            .debounceTime(300) // wait for 300ms pause in events
            .distinctUntilChanged() // ignore if next search term is same as previous
            .switchMap(term => term ?
                // switch to new observable each time
                // return the http search observable
                this.heroSearchService.search(term)
                // or the observable of empty heroes if no search term
                : Observable.of<Hero[]>([]))
            .catch(error => {
                console.log(error);
                return Observable.of<Hero[]>([]);
            })
    }

    gotoDetail(hero: Hero): void {
        let link = ['/detail', hero.id]
        this.router.navigate(link);
    }
}